<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
  	<meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
	<style type="text/css">
		a {
			text-decoration: none
		}
		a.test {
			font-weight: bold;
		}
	</style>
  </head>
  
  <body>
  	<a href="http://jquery.com">jQuery</a>
  	<script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
  	<script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
  	<script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
  	<script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
  	<script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
  	<script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
  	<script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
  	<script type="text/javascript">
  		//onload方法会等页面加载完全部的dom、等待所有的图片下载完毕，甚至是广告
  		window.onload = function() {
  			console.log("window初始化完毕！");
  		};
  		//为了确保dom一旦就绪，就执行使用$(document).ready(function() {})来进行判断
  		$(document).ready(function() {
  			$("a").click(function(event) {
  				if (!$("a").hasClass("test")) {
  					$("a").addClass("test");
  				} else {
  					$("a").removeClass("test");
  				}
  				console.log("触发点击事件！");
  				console.log(event);
  				//click等一系列事件都可以通过 event.preventDefault阻止默认的时间触发
  				event.preventDefault();
  				//return false 会阻止事件冒泡即执行完
  				//event.preventDefault之后
  				//还会执行event.stopPropagation
  				var me = this;
/*   				$(me).hide("slow", function() {
  					//无参回调函数不需要小括号
  					//有参回调函数如果直接使用方法名跟参数，将会导致回调函数立刻执行
  					$.get("/demo/index.html", callback("1", "2"));
  				}); */
  				$(me).hide("slow", function() {
  					//因此需要使用匿名函数包裹回调函数，才能到预期的效果
  					$.get("/demo/index.html", function() {
  						callback("1", "2");
  					})
  					.done(function() {
  						console.log("1本次请求成功！");
  					})
  					//完成请求无论执行结果是成功还是失败都会执行
  					.fail(function() {
  						console.log("1本次请求失败！");
  					})
  					.always(function() {
  						callback("1", "2");
  						console.log("1本次请求完成！")
  					});
  					
                    $.get("/test/simple", function(result) {
                    	console.log("执行回调函数开始！");
                    	callback(result);
                    	console.log("执行回调函数结束！");
                    })
                    .done(function() {
                        console.log("2本次请求成功！");
                    })
                    .fail(function() {
                        console.log("2本次请求失败！");
                    })
                    .always(function() {
                        console.log("2本次请求完成！")
                    });
  				});
  			});
  		});
  		//javascript无法根据方法参数个数重载方法，最后一个同名的方法总会覆盖前面的方法
  		function callback() {
  			console.log("无参回调函数执行成功！");
  		}
  		function callback(arg1, arg2) {
  			console.log("两个参数：" + arg1 + "|" +arg2);
  		}
        function callback(result) {
            console.log("遍历Map回调函数执行成功！");
            for (var key in result) {
                $("body").append("<p> key - " + key + " value - " + result[key] +"</p>");
            }
        }
  	</script>
  </body>
</html>
